<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('节点多选')}`">{{ $t('节点多选') }}</t>
            <li>
                配置<span class="s-code">showCheckbox</span>为<span class="s-code">true</span>，则可以启用节点多选功能
            </li>
            <li>
                通过配置<span class="s-code">isLeafOnly</span>可以控制选中的数据是否只存在<span style="color:#000;font-weight: 600;">叶子节点</span>
            </li>
            <li>
                通过配置<span class="s-code">includeHalfChecked</span>可以控制选中的数据是否包含<span style="color:#000;font-weight: 600;">半选节点</span>，
                该配置项仅在<span class="s-code">showCheckbox</span>为<span class="s-code">true</span>时有效
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleChangeHalf">includeHalfChecked：{{ props.includeHalfChecked }}</el-button>
            <el-button @click="handleChangeLeaf">isLeafOnly：{{ props.isLeafOnly }}</el-button>
            <p style="color: #999;">
                {{ props.isLeafOnly ? '点击确认后，返回的数据只包含已选中的叶子节点（最底层的子节点）' : (props.includeHalfChecked ? '点击确认后，返回的数据包含所有已选中的节点以及半选状态的父节点（子节点部分勾选）' : '点击确认后，返回的数据包含所有已选中的节点，不包含半选状态的父节点（子节点部分勾选）') }}
            </p>
        </div>
        <div style="width: 300px;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <p style="color: #666;">当前选择的是：{{ value && value.length ? value : '--' }}</p>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const treeData = [
            {
                id: 1,
                name: '一级 1',
                children: [
                    {
                        id: 4,
                        name: '二级 1-1',
                        children: [
                            {
                                id: 9,
                                name: '三级 1-1-1',
                            },
                            {
                                id: 10,
                                name: '三级 1-1-2',
                            },
                        ],
                    },
                ],
            },
            {
                id: 2,
                name: '一级 2',
                children: [
                    {
                        id: 5,
                        name: '二级 2-1',
                    },
                    {
                        id: 6,
                        name: '二级 2-2',
                    },
                ],
            },
        ];
        const value = ref(null);
        const props = reactive({
            type: 'tree',
            data: treeData,
            filterable: true,
            showCheckbox: true,
            isLeafOnly: false,
            includeHalfChecked: false,
        });

        return {
            props,
            value,
            handleChangeHalf() {
                props.includeHalfChecked = !props.includeHalfChecked;
                value.value = [];
            },
            handleChangeLeaf() {
                props.isLeafOnly = !props.isLeafOnly;
                value.value = [];
            },
            templateString: `<template>
    <el-button @click="handleChangeHalf">includeHalfChecked：{{ props.includeHalfChecked }}</el-button>
    <el-button @click="handleChangeLeaf">isLeafOnly：{{ props.isLeafOnly }}</el-button>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>当前选择的是：{{ value && value.length ? value : '--' }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const treeData = [
            {
                id: 1,
                name: '一级 1',
                children: [
                    {
                        id: 4,
                        name: '二级 1-1',
                        children: [
                            {
                                id: 9,
                                name: '三级 1-1-1',
                            },
                            {
                                id: 10,
                                name: '三级 1-1-2',
                            },
                        ],
                    },
                ],
            },
            {
                id: 2,
                name: '一级 2',
                children: [
                    {
                        id: 5,
                        name: '二级 2-1',
                    },
                    {
                        id: 6,
                        name: '二级 2-2',
                    },
                ],
            },
        ];
        const value = ref(null);
        const props = reactive({
            type: 'tree',
            data: treeData,
            filterable: true,
            showCheckbox: true,
            isLeafOnly: false,
            includeHalfChecked: false,
        });

        return {
            props,
            value,
            handleChangeHalf() {
                props.includeHalfChecked = !props.includeHalfChecked;
                value.value = [];
            },
            handleChangeLeaf() {
                props.isLeafOnly = !props.isLeafOnly;
                value.value = [];
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
